import React from "react";
import styled from "@emotion/styled";
import { Row } from "components/lib";
import { Task } from "types/epic";
import taskIcon from "assets/task.svg";
import bugIcon from "assets/bug.svg";
import { Card } from "antd";
import { useTasks, useTasksSearchParams, useTaskTypes } from "./util";
import { Mark } from "components/mark";

const TaskTypeIcon = ({ id }: { id: number }) => {
  const { data: taskTypes } = useTaskTypes();
  const name = taskTypes?.find((taskType) => taskType.id === id)?.name;
  if (!name) {
    return null;
  }
  return <img alt={"task-icon"} src={name === "task" ? taskIcon : bugIcon} />;
};

const TaskCard = ({ task }: { task: Task }) => {
  const { name: keyword } = useTasksSearchParams();

  return (
    <Card style={{ marginBottom: "0.5rem", cursor: "pointer" }} key={task.id}>
      <p>
        <Mark name={task.name} keyword={keyword} />
      </p>
      <TaskTypeIcon id={task.typeId} />
    </Card>
  );
};

// @ts-ignore
export const KanbanColumn = ({ kanban }) => {
  const { data: allTasks } = useTasks(useTasksSearchParams());
  const tasks = allTasks?.filter(
    (task: { kanbanId: any }) => task.kanbanId === kanban.id
  );

  return (
    <Container>
      <Row between>
        <h3>{kanban.name}</h3>
      </Row>
      <TasksContainer>
        {tasks?.map((task: Task, taskIndex: any) => (
          <div>
            <TaskCard key={task.id} task={task} />
          </div>
        ))}
      </TasksContainer>
    </Container>
  );
};

export const Container = styled.div`
  min-width: 27rem;
  border-radius: 6px;
  background-color: rgb(244, 245, 247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`;

const TasksContainer = styled.div`
  overflow: scroll;
  flex: 1;

  ::-webkit-scrollbar {
    display: none;
  }
`;
